<template>
  <!-- 项目实施 - 右上角tab4 - 全部附件 - content -->
  <div class="right-tab-con4">
    <el-tabs v-if="tabs" class="attachment" tab-position="top" v-model="topIdx" @tab-click="handleClick">
      <el-tab-pane v-for="(i,idx) in tabs" :key="idx" :name="i.v">
        <div slot="label">{{i.l}} ({{i.list && i.list.length>0 ? i.list.length : 0}})</div>
        <div v-if="i.list && i.list.length>0 && topIdx" class="right-tab-con4-t">
          <div class="right-tab-con4-item" v-for="(j, idxJ) in i.list" :key="idxJ">
            <div class="left">
              <img class="icon1" :src="j.docImg" width="14" height="15">
              <div class="titles">
                <p>{{j.title}}</p>
                <p>{{j.subTitle}}</p>
              </div>
            </div>
            <div class="icons">
              <i class="el-icon-star-off" @click="$message('收藏')"></i>
              <i class="el-icon-download" @click="$message('下载')"></i>
              <i class="el-icon-view" @click="$message('查看')"></i>
            </div>
          </div>
        </div>
        <div v-else class="right-tab-con4-t">
          <img class="right-tab-con4-bg bg1" :src="img" width="80px" height="100px"/>
          <p class="right-tab-con4-text">无数据</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "rightTabCon4",
  components: {},
  data() {
    return {
      loading: false,
      topIdx: '0',
      img: require('../../images/empty-img.png'),
    }
  },
  props: {
    tabTitle: {
      type: String,
      default: () => ''
    },
    info: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    info: {
      handler(n, o) {
        if(n) {
          this.tabs = n;
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // console.log('this.info', this.info);
    this.$nextTick(() => {
      this.tabs = this.info;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击Tab
     */
    handleClick(tab, event) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 600)
    },
  }
}
</script>

<style lang="scss" scoped>
  .right-tab-con4 {
    height: 100%;
    padding: 5px 10px;
    ::v-deep {
      .el-tabs--top {
        .el-tabs__nav-scroll {
          background: #ffffff !important;
          .el-tabs__nav.is-top {
            width: 100%;
            display: inline-flex;
            justify-content: space-around;
          }
        }
        .el-tabs__item.is-active > div {
          width: 25%;
          border-bottom: 1px solid #11a983;
        }
      }
    }
    .right-tab-con4-t {
      height: calc(100% - 50px);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      .right-tab-con4-text {
        font-size: 14px;
        color: #999999;
        width: 100%;
        margin: 0;
        text-align: center;
      }
      .right-tab-con4-item {
        width: 100%;
        padding: 16px 16px 5px;
        display: inline-flex;
        justify-content: space-between;
        border: 0.5px solid #f0f0f0;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, .04), 0 0 12px 0 rgba(0, 0, 0, .03);
        align-items: center;
        margin-bottom: 10px;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          background: rgba(17, 163, 137, 0.08);
        }
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          img {
            margin-top: 3px;
          }
          .titles {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            margin-left: 5px;
            p {
              margin: 0 10px 10px;
              font-size: 14px;
              &:last-child {
                color: #999999;
                font-size: 12px;
              }
            }
          }
        }
        .icons {
          margin-bottom: -20px;
          width: 50px;
          display: inline-flex;
          justify-content: space-between;
          align-items: baseline;
          i {
            cursor: pointer;
          }
        }
      }
    }
  }
</style>